<template>
    <div>
        <li>
            <div v-if='data.id >0' @click="updatepid(data.id)" :class = "pid == data.id ? 'active':'' " :id='data.id'>{{data.name}}</div>
            <ul v-if="data.son && data.son.length>0">
                <reply v-for="son in data.son"  :data='son' :key='son.id' />


            </ul>

        </li>

    </div>
</template>

<script>
    export default {
        name:'reply',
        props:['data'],
        data(){
            return{
                pid :0
            }
        },
        methods: {
            updatepid(pid){
                //更新父id
                alert(pid)
                this.pid = pid
                //有id后删除颜色
                let divlist = document.getElementsByClassName('active')
                for(var i=0;i<divlist.length;i++){
                    divlist[i].classList.remove('active')
                }
                //把当前选中的加上颜色
                let prediv = document.getElementById(pid)
                prediv.classList.add('active')
                //存入localStorage
                localStorage.setItem('pid',pid)
            }
        },
    }
</script>

<style scoped>
.active{
    background-color: aqua;
}
</style>